<template>
	<view class="content">
		<scroll-view scroll-x="true" :scroll-into-view="scrollInto" class="scroll-row tabbar-container">
			<view class="scroll-row-item px-3" style="height:100rpx" v-for="(item,index) in tabList" :key="item.id" :id="'tab'+index" @click="onTabBarChange(index)">
				<text :class="tabIndex===index ? 'font-lg text-main':'font-md text-dark'">{{item.classname}}</text>
			</view>
		</scroll-view>
		<swiper :duration="150" :current="tabIndex" :style="'height:'+scrollH+'px'" @change="onSwiperChange">
				<swiper-item v-for="(item,index) in newsList" :key="index">
					<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" @scrolltolower="loadmore(index)">
						<template v-if="item.list.length>0">
							<block v-for="(post,postIndex) in item.list" :key="postIndex">
								<post-item :item="post" :index="index" @onFollow="onFollow"></post-item>
								<divider />
							</block>
							<uni-load-more :status="item.loadmore"></uni-load-more>
						</template>
						<template v-else-if="!item.firstLoad">
							<view class="flex-1 flex flex-column align-center justify-center" style="height: 100%;">
								<image class="rounded-circle" style="width: 100rpx;height: 100rpx;" src="/static/common/loading.gif" mode=""></image>
							</view>
						</template>
						<template v-else>
							<view>
								<empty />
							</view>
						</template>
					</scroll-view>
				</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-ui/uni-load-more/uni-load-more.vue'
	export default {
		components:{
			uniLoadMore
		},
		data() {
			return {
				tabIndex:0,
				tabList:[],
				scrollInto:'',
				newsList:[],
				scrollH:600,
				loadStatus:'loading'
			}
		},
		onLoad() {
			this.getTabList()
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight - uni.upx2px(100);
				}
			})
		},
		// 监听原生标题栏输入框点击
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '/pages/search/search'
			});
		},
		// 监听原生标题栏按钮点击
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:'/pages/add-input/add-input'
			})
		},
		methods: {
			getTabList() {
				this.$H.get('/postclass').then(res=> {
					console.log('res',res)
					this.tabList = res?.list || [];
					let arr = [];
					for (let i = 0; i < this.tabList.length; i++) {
						arr.push({
							loadmore:'more',
							page:1,
							firstLoad:false,
							list:[]
						})
					}
					this.newsList = arr;
					if(this.tabList.length>0) {
						this.getList()
					}
				})
			},
			// 获取指定分类下的列表数据
			getList() {
				let index = this.tabIndex;
				let id = this.tabList[index].id;
				let page = this.newsList[index].page;
				let isrefresh = page === 1;
				this.$H.get(`/postclass/${id}/post/${page}`,{},{
					token:true,
					noCheck:true
				}).then(res=> {
					let formatList = res.list.map(v=>{
						return this.$U.formatCommonList(v)
					})
					this.newsList[index].list = isrefresh ? formatList : [...this.newsList[index].list,...formatList];
					this.newsList[index].loadmore  = formatList.length < 10 ? 'noMore' : 'more';
					if (isrefresh) {
						this.newsList[index].firstLoad = true
					}
				}).catch(()=> {
					if(!isrefresh){
						this.newsList[index].page--;
					}
				})
			},
			// 上拉加载更多
			loadmore(index) {
				// 拿到当前列表
				let item = this.newsList[index]
				// 判断是否处于可加载状态（上拉加载更多）
				if (item.loadmore !== 'more') return;
				// 修改当前列表加载状态
				item.loadmore = 'loading'
				// 请求数据
				item.page++;
				this.getList()
			},
			// 点击切换分类
			onTabBarChange(index) {
				this.scrollInto = 'tab'+index;
				this.tabIndex = index;
				this.getList();
			},
			// 滑动页面切换分类
			onSwiperChange(e) {
				const index = e.detail.current;
				this.tabIndex = index;
				this.scrollInto = 'tab'+index;
				this.getList();
			},
			// 关注
			onFollow(postItem,index) {
				this.newsList.forEach(item=> {
					item.list.forEach(v=> {
						if(v.user_id === postItem.user_id){
							postItem.isFollow = true
						}
					})
				})
				uni.showToast({
					title: '关注成功'
				});
			}
		}
	}
</script>

<style lang="scss">
	.tabbar-container {
		width: 100%;
		height: 100rpx;
		.scroll-row-item {
			height: 100%;
			line-height: 100rpx;
			text-align: center;
		}
	}
	
</style>
